<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Portal Site</title>	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="mockup-style.css" />
		<link rel="stylesheet" type="text/css" href="tb.css" />
		<script type="text/javascript" src="inc/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="inc/interface/interface.js"></script>
		<script type="text/javascript" src="inc/sortwidgets.js"></script>
		<script type="text/javascript" src="inc/autoexpand.js"></script>
		<script type="text/javascript" src="inc/thickbox.js"></script>
		<style type="text/css">
			div.widgetscolumn {
				float: left;
				width: 310px;
				margin: 0px 4px;
				min-height: 400px;
			}

			.sortHelper {
				background: url("img/back.png");
				width: 310px;
				border: 1px solid #f57900;
				height: 20px;
			}
		</style>
	</head>

	<body>
		<ul id="menubar">
			<li id="logo"><a href="#"><img src="img/companionCube.png" alt="Weighted Companion Cube" title="Weighted Companion Cube" /></a></li>
			<li><a href="menu.html?KeepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=350" title="Add widgets" class="thickbox"><img src="img/plus.png" alt="+" /> Add widgets</a></li>
			<li><a href="login.html?KeepThis=true&amp;TB_iframe=true&amp;height=170&amp;width=220" title="Login" class="thickbox"><img src="img/users.png" alt="" /> Login</a></li>
			<li><a href="menu.html?KeepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=350" title="Help" class="thickbox"><img src="img/help.png" alt="F1" /> Help</a></li>
		</ul>
		
		<input type="hidden" value="0" id="theValue" />
		<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
		<div id="myDiv"> </div>
		<script type="text/javascript">
			function addElement() {
				var ni = document.getElementById('myDiv');
				var numi = document.getElementById('theValue');
				var num = (document.getElementById('theValue').value -1)+ 2;
				numi.value = num;
				var newdiv = document.createElement('div');
				var divIdName = 'my'+num+'Div';
				newdiv.setAttribute('id',divIdName);
				newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
				ni.appendChild(newdiv);
			}

			function removeElement(divNum) {
				var d = document.getElementById('myDiv');
				var olddiv = document.getElementById(divNum);
				d.removeChild(olddiv);
			}
		</script>
		<div id="desktop">
			<div id="col1" class="widgetscolumn">
				<div class="widget searchbar">
					<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Google bar</h2>
					<form class="wContainer" action="http://www.google.com/search">
						<p><input type="text" id="search" name="q" /></p>
						<p><input type="submit" class="button" value="Search" /></p>
					</form>
				</div>
				<div class="widget stickynote">
					<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Sticky header</h2>
					<div class="wContainer">
						<textarea rows="4" cols="10" onfocus="new ResizingTextArea()"></textarea>
					</div>

				</div>
			</div>
			<div id="col2" class="widgetscolumn">
				<div class="widget email">
					<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Send mail</h2>
					<div class="wContainer">
						<p>To:</p>
						<p><input type="text" name="email_to" /></p>
						<p>Subject:</p>
						<p><input type="text" name="email_subject" /></p>
						<p>Text:</p>
						<p><textarea rows="4" cols="10" name="email"></textarea></p>
						<p><input type="submit" class="button" value="Send mail!" /></p>
					</div>
				</div>
			</div>
			<div id="col3" class="widgetscolumn">
				<div class="widget rss">
					<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> RSS Feed titel</h2>
					<ul class="wContainer">
						<li>RSS header 1</li>
						<li>RSS header 2</li>
						<li>RSS header 3</li>
						<li>RSS header 4</li>
					</ul>
				</div>
				<div class="widget puzzle">
					<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Puzzle</h2>
					<div class="wContainer">
						<img src="img/utrecht/utrecht1.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht2.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht3.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht4.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht5.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht6.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht7.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht8.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht9.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht10.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht11.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht12.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht13.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht14.jpg" class="sortableitem" alt="" />
						<img src="img/utrecht/utrecht15.jpg" class="sortableitem" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" /></a></p>
		</div>
		<script type="text/javascript">
			$(document).ready(
				function () {
					$('div').Sortable(
						{
							accept : 		'sortableitem',
							helperclass : 	'sorthelper',
							activeclass : 	'sortableactive',
							hoverclass : 	'sortablehover',
							opacity: 		0.8,
							/*fx:				200,*/
							revert:			true,
							floats:			true,
							tolerance:		'pointer'
						}
					)
				}
			);
		</script>
	</body>
</html>
